<script setup lang="ts">
import { ref } from 'vue';
import { formatDate } from '../../utils/format';
import Taro from '@tarojs/taro'
import { Information } from './typing';

const tabValue = ref(0)
function changeTab(tab: any) {
	tabValue.value = tab.paneKey as number
}
const infoList = ref<Information[]>([])
Taro.request({
	url: 'http://localhost:3000/info',
	header: {
		'content-type': 'application/json' // 默认值
	},
	success: function (res) {
		infoList.value = res.data.data
	}
})

</script>

<template>
	<view>
		<view>
			<nut-navbar :left-show="false">
				<template #content>
					<nut-tabs v-model="tabValue" @click="changeTab">
						<nut-tabpane title="公告"></nut-tabpane>
						<nut-tabpane title="资讯"></nut-tabpane>
					</nut-tabs>
				</template>
			</nut-navbar>
		</view>
		<view class="px-2">
			<nut-cell v-for="(it, idx) in infoList.filter(it => it.type === (tabValue === 0 ? '公告' : '资讯'))" :key="idx">
				<view class="flex">
					<view>
						<image src="../../static/announce.jpg" v-if="tabValue === 0" class="mr-2 w-150 h-150" />
						<image src="../../static/message.jpg" v-else class="mr-2 w-150 h-150" />
					</view>
					<view>
						<view class="break-all" v-html="it.title"></view>
						<text class="text-gray-500">{{ formatDate(it.createTime) }}</text>
					</view>
				</view>
			</nut-cell>
		</view>

	</view>
</template>